<template>
  <div class="choose-view">
    <div class="bread-con">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: 'preData' }">pre-data</el-breadcrumb-item>
        <el-breadcrumb-item>{{caseBread}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="add-case-con">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="pre-data名称：" prop="preDataName">
          <el-input v-model="form.preDataName"></el-input>
        </el-form-item>
        <el-form-item label="case：" prop="caseName">
          <template>
            <el-button type="text" @click="dialogTableVisible = true">{{form.caseName}}</el-button>
            <el-dialog title="case列表" :visible.sync="dialogTableVisible">
              <el-form :inline="true" :model="form">
                <el-form-item label="case名称：">
                  <el-input v-model="form.searchName" auto-complete="on"></el-input>
                </el-form-item>
                <el-form-item label="case编号：">
                  <el-input v-model="form.searchNum"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                  <el-button type="primary" @click="onEmptied">查询</el-button>
                </el-form-item>
              </el-form>
              <el-table :data="gridDataList" @row-click="rowClick">
                <el-table-column
                  prop="caseNumber"
                  align="center"
                  label="case编号">
                </el-table-column>
                <el-table-column
                  prop="caseName"
                  align="center"
                  label="case名称">
                </el-table-column>
              </el-table>
              <div class="choose-page">
                <test-page :table-list="gridDataList" :table="gridData" @get-table-list="getPageList"
                           @get-table-data="getPageData" :url="dataUrl" :query-data="search"></test-page>
              </div>
            </el-dialog>
          </template>
        </el-form-item>
        <el-form-item label="pre-data：" prop="preDataDetail">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 8}"
            placeholder="请输入内容"
            v-model="form.preDataDetail">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(form)">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
  import Page from '@/components/testPage.vue';
  import Choose from '../consoleUrl.js';
  const sucStatus = 200;
  export default {
    data() {
      var validateCaseName = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入pre-data'));
        } else {
          callback();
        }
      };
      var validateCaseNumber = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入pre-data名称'));
        } else {
          callback();
        }
      };
      return {
        form: {
          id: '',
          preDataName: '',
          searchName: '',
          searchNum: '',
          preDataDetail: '{"data":[{"key" : "value"},{"key" : "value"}]}',
          caseId: '',
          caseName: '请选择case',
          caseNumber: ''
        },
        search: '',
        dataUrl: Choose.caseList,
        gridDataList: [],
        gridData: {},
        dialogTableVisible: false,
        caseBread: '新增pre-data',
        defPageSize: 10,
        defPageNum: 1,
        edit: false,
        rules: {
          preDataName: [
            {validator: validateCaseNumber, trigger: 'blur'}
          ],
          preDataDetail: [
            {validator: validateCaseName, trigger: 'blur'}
          ]
        },
        castType: []
      };
    },
    components: {
      'test-page': Page
    },
    created () {
      let type = this.$route.params.templateType;
      if (type) {
        this.caseBread = '编辑pre-data';
        this.edit = type;
        this.form.id = type.id;
        this.form.caseName = type.caseName;
        this.form.caseNumber = type.caseNumber;
        this.form.preDataName = type.preDataName;
        this.form.preDataDetail = type.preDataDetail;
      }
      this.$ajax({
        method: 'GET',
        url: Choose.caseList + '?pageSize=10&pageNum=1'
      }).then((response) => {
        if (response.status === sucStatus) {
          this.gridDataList = response.data.data.list;
          this.gridData = response.data.data;
        }
      });
    },
    methods: {
      rowClick: function (r, c, cell, ev) {
        this.dialogTableVisible = !this.dialogTableVisible;
        this.form.caseId = r.caseId;
        this.form.caseName = r.caseName;
        this.form.caseNumber = r.caseNumber;
      },
      getPageList: function (list) {
        this.gridDataList = list;
      },
      getPageData: function (data) {
        this.gridData = data;
      },
      onSubmit() {
        this.search = `&caseName=${this.form.searchName}&caseNumber=${this.form.searchNum}`;
        this.getQueryData(this.search);
      },
      onEmptied: function () {
        this.search = '';
        this.form.searchName = '';
        this.form.searchNum = '';
        this.getQueryData(this.search);
      },
      submitForm(formName) {
        let that = this;
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.form.caseName === '请选择case') {
              this.$message.error('请选择有效case');
              return;
            }
            if (this.edit) {
              this.form.id = this.edit.id;
              this.form.preDataDetail = this.form.preDataDetail.replace(/\s/g, '');
              this.$ajax({
                method: 'PUT',
                url: Choose.preData,
                data: this.form
              }).then((response) => {
                if (response.status === sucStatus) {
                  let txt = '修改成功';
                  this.successMsg(txt);
                  window.history.go(-1);
                }
              }, function (error) {
                this.$message.error(error.data.error);
              });
            } else {
              this.$ajax({
                method: 'POST',
                url: Choose.preData,
                data: formName
              }).then((response) => {
                if (response.status === sucStatus) {
                  let txt = '添加成功';
                  this.successMsg(txt);
                  window.history.go(-1);
                }
              }, function () {
                that.$message.error('网络错误');
              });
            }
          } else {
            return false;
          }
        });
      },
      successMsg(txt) {
        this.$message({
          message: txt,
          type: 'success'
        });
      },
      addDomain() {
        this.form.step.push({
          step: '',
          expectResult: '',
          id: ''
        });
      },
      getQueryData: function (str) {
        this.$ajax({
          method: 'GET',
          url: `${Choose.caseList}?pageSize=${this.defPageSize}&pageNum=${this.defPageNum}${str}`
        }).then((response) => {
          if (response.status === sucStatus) {
            this.gridDataList = response.data.data.list;
            this.gridData = response.data.data;
          }
        });
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .add-case-con
    width: 50%;

  .add-temp-div
    display: inline-block;
    width: 36%;
    margin-bottom: 10px;

  .add-temp-btn
    display: inline-block;

  .add-temp-num
    width: 15%;
</style>
